import { 
    // interval, 
    timer,
    of,
    EMPTY,
    range,
    iif,
    from,
    fromEvent
} from 'rxjs'

const CreationOperator = () => {
    // 被订阅时，会按照设定的时间间隔持续推送数据流，数据流从0开始
    // interval(1000).subscribe(data => console.log(`interval 显示：${data}`))

    // timer(0,1000).subscribe(data => console.log(`timer 显示：${data}`))

    timer(3000).subscribe(data => console.log(`timer 显示：${data}`))

    of(2,3).subscribe(data => console.log(`of 例子：${data}`))

    EMPTY.subscribe(data => console.log(`empty 例子：${data}`))

    range(3,4).subscribe(data => console.log(`range: ${data}`))

    const iifHandle = (data) => {
        return iif(() => data % 2 === 0, of("hello"),EMPTY)
    }

    iifHandle(1).subscribe(data => console.log(`iif 例子1：${data}`))

    iifHandle(2).subscribe(data => console.log(`iif 例子2：${data}`))

    from([1,2,3,4]).subscribe(data => {
        console.log(`from 例子1： ${data}`)
    })

    function* rangeGener(start, end) {
        for (let i = start; i <= end; ++i) {
            yield i;
        }
    }

    from(rangeGener(1, 4)).subscribe((data) => {
        console.log(`from 示例 (2): ${data}`);
    });

    from(Promise.resolve(1)).subscribe(data => {
        console.log(`from 示例 (3): ${data}`);
    });

    // 会重新组成一个新的Observable
    from(of(1, 2, 3, 4)).subscribe(data => {
        console.log(`from 示例 (4): ${data}`)
    });

    fromEvent(document,"click").subscribe(data => {
        console.log('fromEvent 例子：document 触发事件')
    })

    return (
        <section style={{padding: '20px'}}>
        <h1>创建操作符: </h1> 
        <p>interval</p> 
        <p>timer</p> 
        <p>of</p> 
        <p>EMPTY</p> 
        <p>range</p> 
        <p>iif</p> 
        <p>throwError</p>
        <p>from</p> 
        <p>fromEvent</p> 
        <p>fromEventPaattern</p> 
        </section>
    )
}

export default CreationOperator